import React, { useEffect } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from '@/pages/OnboardAndLeave/AdjustPost/Add/Wrap.less';
import { Card, Col, Form, Row, Spin } from 'antd';
import { connect } from 'umi';
import Step from '../components/Step';
import FormList from '../components/JsonToForm';
import style from './index.less';

const Detail = ({ dispatch, flowOldProcess, location, form, loading }) => {
    const listLoading = loading;
    const { processInstanceId } = location.query;
    const { detailData, processList } = flowOldProcess;
    const { formList, processInstanceName } = detailData;
    // 获取详情
    const fetchDetail = () => {
        const params = { processInstanceId };
        dispatch({
            type: 'flowOldProcess/fetchDetail',
            payload: params
        });
    };
    // 审批流程节点
    const fetchProcessList = () => {
        const params = {
            processInstanceId
        };
        dispatch({
            type: 'flowOldProcess/fetchProcess',
            payload: params
        });
    };

    const onHandleChange = () => {
        console.log('sssssss');
    };
    useEffect(() => {
        const init = async () => {
            await dispatch({
                type: 'flowOldProcess/clearDetail'
            });
            fetchDetail();
            fetchProcessList();
        };
        init();
    }, []);

    return (
        <PageHeaderWrapper type="success">
            <Spin spinning={listLoading}>
                <Card>
                    <Row className={styles.titleBox} type="flex">
                        <Col>
                            <h3 className={styles.title}>{processInstanceName}</h3>
                        </Col>
                    </Row>
                    <div className={style.detailCtr}>
                        <FormList form={form} formList={formList} submitBtn="确定" onChange={onHandleChange} />
                        <div className={styles.wrap}>
                            <h3 className={styles.title}>审批流程</h3>
                            <Row style={{ marginLeft: 30 }}>
                                <Col offset={3}>
                                    <Step data={processList} />
                                </Col>
                            </Row>
                        </div>
                    </div>
                </Card>
            </Spin>
        </PageHeaderWrapper>
    );
};
export default connect(({ flowOldProcess, loading }) => ({
    flowOldProcess,
    loading: loading.effects['flowOldProcess/fetchDetail']
}))(Form.create()(Detail));
